"use client"
import MyButton from '@/components/form/my-button';
import { useSearchParams } from 'next/navigation';
import React from 'react';
import { useRouter } from 'nextjs-toploader/app';

// 补充类型定义（适配项目主题）
declare module 'react' {
  interface HTMLAttributes<T> {
    'className'?: string;
  }
}

interface Props {
  className?: string;
  total: number;
  size: number; // 总页码数（复用为总页码数）
}

const Pagination: React.FC<Props> = ({
  className,
  total,
  size, // 接收总页码数，重命名为totalPages更清晰
}) => {
  const router = useRouter();
  // 计算总页数（向上取整）
  const totalPages = Math.ceil(total / size);

  const page = Number(useSearchParams().get('page') ?? 1)
  // 最多显示7个按钮
  const MAX_VISIBLE_BUTTONS = 7;

  // 生成要显示的页码数组（包含类型标识，避免key重复）
  type PageItem = {
    type: 'page' | 'ellipsis'; // 区分页码和省略号
    value?: number; // 页码值（省略号无）
  };

  const generatePageItems = (): PageItem[] => {
    const items: PageItem[] = [];
    const half = Math.floor(MAX_VISIBLE_BUTTONS / 2);

    // 总页码数 <= 7，直接显示所有页码
    if (totalPages <= MAX_VISIBLE_BUTTONS) {
      return Array.from({ length: totalPages }, (_, i) => ({
        type: 'page',
        value: i + 1,
      }));
    }

    // 总页码数 > 7，处理省略逻辑
    let startPage = Math.max(1, page - half);
    let endPage = Math.min(totalPages, page + half);

    // 边界调整：确保起始页不小于1，结束页不大于总页码数
    if (startPage === 1) {
      endPage = MAX_VISIBLE_BUTTONS;
    }
    if (endPage === totalPages) {
      startPage = Math.max(1, totalPages - MAX_VISIBLE_BUTTONS + 1);
    }

    // 添加首页
    items.push({ type: 'page', value: 1 });

    // 首页和起始页之间添加省略号（避免重复显示页码）
    if (startPage > 2) {
      items.push({ type: 'ellipsis' });
    }

    // 添加中间页码（跳过已添加的首页）
    for (let i = startPage; i <= endPage; i++) {
      if (i !== 1 && i !== totalPages) { // 避免重复添加首页和末页
        items.push({ type: 'page', value: i });
      }
    }

    // 结束页和末页之间添加省略号
    if (endPage < totalPages - 1) {
      items.push({ type: 'ellipsis' });
    }

    // 添加末页（确保只添加一次）
    if (totalPages !== 1) {
      items.push({ type: 'page', value: totalPages });
    }

    return items;
  };

  // 处理页码点击：更新URL的?page参数
  const handlePageClick = (targetPage: number) => {
    if (targetPage === page) return; // 点击当前页不触发

    const url = new URL(window.location.href);
    url.searchParams.set('page', targetPage.toString());
    // 刷新页面，触发Next.js的路由更新
    router.push(url.toString());  
  };

  const pageItems = generatePageItems();

  return (
    <div className={`mt-8 flex flex-wrap items-center justify-center gap-2 md:gap-3 ${className}`}>
      {/* 上一页按钮 */}
      <MyButton
        variant='secondary'
        onClick={() => page > 1 && handlePageClick(page - 1)}
        disabled={page === 1}
        className={`px-3 py-1 rounded-md transition-colors ${
          page === 1
            ? 'opacity-50 cursor-not-allowed'
            : 'hover:bg-gray-50'
        }`}
      >
        上一页
      </MyButton>

      {/* 页码按钮和省略号 */}
      {pageItems.map((item, index) => {
        // 省略号
        if (item.type === 'ellipsis') {
          return (
            <span
              key={`ellipsis-${index}`} // 用index确保key唯一
              className="px-3 py-1"
            >
              ...
            </span>
          );
        }

        // 正常页码按钮
        return (
          <MyButton
            variant={item.value === page ? 'primary' : 'secondary'}
            key={`page-${item.value}`} // 用页码值确保key唯一（格式：page-1, page-2...）
            onClick={() => item.value && handlePageClick(item.value)}
            className={`px-3 py-1 rounded-md transition-colors`}
            disabled={!item.value}
          >
            {item.value}
          </MyButton>
        );
      })}

      {/* 下一页按钮 */}
      <MyButton
        variant='secondary'
        onClick={() => page < totalPages && handlePageClick(page + 1)}
        disabled={page === totalPages}
        className={`px-3 py-1 rounded-md transition-colors ${
          page === totalPages
            ? 'opacity-50 cursor-not-allowed'
            : 'hover:bg-gray-50'
        }`}
      >
        下一页
      </MyButton>
    </div>
  );
};

export default Pagination;